<template>
  <!-- 每日动画 -->
  <div class="animation flex-column">
    <div class="top">
      每日动画放送表
      <logo />
    </div>
    <!-- 手风琴 -->
    <el-collapse v-model="weekDay" accordion>
      <el-collapse-item v-for="(item, index) in bangumi.calendarList" :key="index" :title="item.weekday.cn"
        :name="item.weekday.id">
        <!-- 默认插槽 -->
        <template #default>
          <div class="cardList">
            <div v-for="(item1, index1) in bangumi.calendarList" :key="index1" class="card-div"
              v-show="item1.weekday.id == weekDay">
              <!-- 卡片 -->
              <el-card v-for="(item2, index2) in item1.items" :key="index2"
                :body-style="{ padding: '10px', boxSizing: 'border-box' }" shadow="hover" class="card-item">
                <template #header>
                  <!-- 图片 -->
                  <el-image style="width: 118px; height: 152px" :src="item2.images.common" fit="cover"
                    :preview-src-list="[item2.images.large]" v-if="item2.images !== null" :lazy="true">
                    <!-- 加载完成前 -->
                    <template #placeholder>
                      <div v-loading="true"></div>
                    </template>
                    <!-- 加载失败 -->
                    <template #error>
                      <el-empty style="width: 118px; height: 158px" description="图片不存在" :image-size="60" />
                    </template>
                  </el-image>
                </template>
                <!-- 动画名 -->
                <div class="card-name">{{ item2.name_cn !== '' ? item2.name_cn : item2.name }}</div>
              </el-card>
            </div>
          </div>
        </template>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup>
import logo from './logo.vue'
import useStore from "@/pinia/index.js";
// 获取每日动画放送
const { bangumi } = useStore();
bangumi.REQUEST_daily_anime()
// 今天星期几
let weekDay = new Date().getDay();
function getWeekDay() {
  if (weekDay === 0) {
    weekDay = 7
  }
  return weekDay;
}
getWeekDay()
</script>

<style lang="less" scoped>
:deep(.el-loading-parent--relative) {
  height: 100%;
}

:deep(.el-collapse-item__header) {
  padding: 0 10px;
  box-sizing: border-box;
}

:deep(.el-collapse-item__header.is-active) {
  /* font-size: 16px; */
  // font-weight: bold;
  color: #409eff;
}

:deep(.el-collapse) {
  width: 100%;
}

.cardList {
  width: 100%;
  box-sizing: border-box;

  .card-div {
    // display: flex;
    // flex-direction: row;
    // flex-wrap: wrap;
    // justify-content: space-between;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    justify-items: center; //水平居中

    .card-item {
      width: 140px;
      box-sizing: border-box;
      margin: 10px;

      .card-name {
        font-size: 14px;
        font-weight: bolder;
        text-align: center;
        word-break: break-word; //断行
        -webkit-line-clamp: 1; //行数
        text-overflow: ellipsis; //省略号
        white-space: normal; // 换行
        overflow: hidden; // 溢出隐藏
        display: -webkit-box; //显示多行文本
        -webkit-box-orient: vertical; //盒子垂直排列
      }

      &:hover {
        cursor: pointer;
        // 阴影
        box-shadow: 0 0 5px 1px rgb(19 124 189 / 50%);
      }
    }
  }
}

.flex-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-content: center;
}

.animation {
  border: 1px solid #efeff5;
  border-radius: 4px;

  .top {
    width: 100%;
    height: 50px;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    padding: 10px;
    box-sizing: border-box;
    justify-content: space-between;
  }
}
</style>